
<style>
.input-row{
	display: flex;
	align-items: center;
	font-size: 30upx;
	padding: 14px 0;
}
.input-row input{
	display: flex;
	flex: 1;
}
.input-row button{
	font-size: 30upx;
	width: 200upx;
	padding: 0;
	border-radius: 0;
}
</style>

<template>
    <view class="content">
        <view class="input-group">
            <view class="input-row border">
                <text class="title">手机号：</text>
                <input type="text" v-model="mobile" placeholder="请输入手机号">
            </view>
			<!-- <view class="input-row border">
				<text class="title">昵称：</text>
				<input type="tel" v-model="nickname" placeholder="请输入昵称">
			</view> -->
			<view class="input-row border">
			    <text class="title">验证码：</text>
			    <input type="tel" v-model="code" placeholder="请输入验证码">
				<button type="primary" @click="getCode" :disabled="disabled">{{sendCode}}</button>
			</view>
            <view class="input-row border">
                <text class="title">新密码：</text>
                <input type="text" password="true" v-model="password" placeholder="请输入新密码">
            </view>
        </view>
        <view class="btn-row">
            <button type="primary" class="primary" @tap="register">确定修改</button>
        </view>
    </view>
</template>

<script>
    import service from '../../service.js';
    import {
        mapState,
        mapMutations
    } from 'vuex'
	
   let telReg = /^[1][3,4,5,7,8][0-9]{9}$/;
   
    export default {
        data() {
            return {
                mobile: '',
				nickname:'',
                password: '',
                email: '',
				sendCode:'获取验证码',
				code:'',
				disabled:false
            }
        },
		computed: {
		    ...mapState(['userInfo'])
		},
		onShow(){
			console.log(this.userInfo);
		},
        methods: {
			getCode(){
				if(!telReg.test(this.mobile)){
					uni.showToast({
					title:'请正确填写手机号',
					icon:'none',
					mask:true
					})
					return
				}
				uni.request({
                	url:this.httpUrl+'user/sendSms',
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded' 
					},
                	data:{
                		mobile:this.mobile
                	},
                	success: (res) => {
                	     console.log(res)
						 if(res.data.code == 1){
							this.changeCode()
						 }else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								mask:true
							}) 
						 }
                	}
                })
				
			},
			changeCode(){
				this.disabled = true
				this.sendCode = 60
				let timer = ''
				timer = setInterval(()=>{
					this.sendCode -=1
					if(this.sendCode<0){
						clearInterval(timer)
						this.sendCode = '重新发送'
						this.disabled = false
					}
				},1000)	
			},
			valInfo(){
				if(!this.mobile){
					uni.showToast({
					title:'请填写账号',
					icon:'none',
					mask:true
					})
					return
				}
				
				if(!telReg.test(this.mobile)){
					uni.showToast({
					title:'请正确填写手机号',
					icon:'none',
					mask:true
					})
					return
				}
				if(!this.code){
					uni.showToast({
					title:'请填写验证码',
					icon:'none',
					mask:true
					})
					return
				}
				if(!this.password){
					uni.showToast({
					title:'请填写密码',
					icon:'none',
					mask:true
					})
					return
				}
			},
            register() {
				if(!this.mobile){
					uni.showToast({
					title:'请填写手机号',
					icon:'none',
					mask:true
					})
					return
				}
				
				if(!telReg.test(this.mobile)){
					uni.showToast({
					title:'请正确填写手机号',
					icon:'none',
					mask:true
					})
					return
				}
				if(!this.code){
					uni.showToast({
					title:'请填写验证码',
					icon:'none',
					mask:true
					})
					return
				}
				if(!this.password){
					uni.showToast({
					title:'请填写密码',
					icon:'none',
					mask:true
					})
					return
				}
                uni.request({
                	url:this.httpUrl+'user/changePassWord',
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded' 
					},
                	data:{
                		mobile:this.mobile,
                		passwd:this.password,
						code:this.code
                	},
                	success: (res) => {
                	     console.log(res)
						 if(res.data.code == 1){
							 uni.showToast({
							 	title:'修改成功',
								icon:'none',
								mask:true
							 })
							 setTimeout(()=>{
								 uni.navigateBack({
								 	delta:1
								 })
							 },1000)
						 }else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								mask:true
							}) 
						 }
                	}
                })
            }
        }
    }
</script>

